<extend name='Public/demo' />
<block name='body'>
    <section class="wrapper">
        <!-- page start -->
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <section class="panel">
                    <header class="panel-heading">用户注册 | Register</header>
                    <div class="panel-body">
                        <div class="stepy-tab">
                            <ul id="default-titles" class="stepy-titles clearfix">
                                <li id="default-title-0" class="current-step">
                                    <div>第1步</div>
                                </li>
                                <li id="default-title-1" class="">
                                    <div>第2步</div>
                                </li>
                                <li id="default-title-2" class="">
                                    <div>第3步</div>
                                </li>
                            </ul>
                        </div>
                        <form class="form-horizontal" id="default" action="{:U('Home/Login/signupdo')}" method="post">
                            <fieldset title="第1步" class="step" id="default-step-0">
                                <legend></legend>
                                <div class="form-group">
                                    <label class="col-lg-1 control-label">邮箱：</label>
                                    <div class="col-lg-10">
                                        <input type="text" class="form-control" name="username" placeholder="你的邮箱地址" status="0" />
                                    </div>
                                    <div class="col-lg-1">
                                        <i class="icon-ok status-ok" style="color:green;font-size: 20px;line-height: 35px;display:none"></i>
                                        <i class="icon-remove status-error" style="color:red;font-size: 20px;line-height: 35px;"></i>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-1 control-label">密码：</label>
                                    <div class="col-lg-10">
                                        <input type="password" class="form-control" name="password" placeholder="请输入6~18位的密码，放心，我不会看的 0 0" status="0" maxlength="18" />
                                    </div>
                                    <div class="col-lg-1">
                                        <i class="icon-ok status-ok" style="color:green;font-size: 20px;line-height: 35px;display:none"></i>
                                        <i class="icon-remove status-error" style="color:red;font-size: 20px;line-height: 35px;"></i>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset title="第2步" class="step" id="default-step-1">
                                <legend></legend>
                                <div class="form-group">
                                    <label class="col-lg-1 control-label">昵称：</label>
                                    <div class="col-lg-10">
                                        <input type="text" class="form-control" name="nickname" placeholder="快报上名来~" maxlength="10" />
                                    </div>
                                    <div class="col-lg-1">
                                        <i class="icon-ok status-ok" style="color:green;font-size: 20px;line-height: 35px;display:none"></i>
                                        <i class="icon-remove status-error" style="color:red;font-size: 20px;line-height: 35px;"></i>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-1 control-label">性别：</label>
                                    <div class="col-lg-10">
                                        <input type="radio" name="sex" value="0" /> 女
                                        <input type="radio" name="sex" value="1" /> 男
                                        <input type="radio" name="sex" checked="checked" value="2" /> 保密
                                    </div>
                                    <div class="col-lg-1">
                                        <i class="icon-ok status-ok" style="color:green;font-size: 20px;line-height: 35px;"></i>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-1 control-label">生日：</label>
                                    <div class="col-lg-10">
                                        <input type="date" class="form-control" name="birthday" />
                                    </div>
                                    <div class="col-lg-1">
                                        <i class="icon-ok status-ok" style="color:green;font-size: 20px;line-height: 35px;display:none"></i>
                                        <i class="icon-remove status-error" style="color:red;font-size: 20px;line-height: 35px;"></i>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-1 control-label">签名：</label>
                                    <div class="col-lg-10">
                                        <textarea class="form-control" name="signature" cols="60" rows="5" maxlength="120"></textarea>
                                    </div>
                                    <div class="col-lg-1">
                                        <i class="icon-ok status-ok" style="color:green;font-size: 20px;line-height: 35px;"></i>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset title="第3步" class="step" id="default-step-2">
                                <legend></legend>
                                <div class="form-group">
                                    <label class="col-lg-1 col-lg-offset-3 control-label">昵称：</label>
                                    <div class="col-lg-5">
                                        <p id="showNickname" class="form-control-static" style="border-bottom:1px dotted #eee"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-1 col-lg-offset-3 control-label">邮箱：</label>
                                    <div class="col-lg-5">
                                        <p id="showUsername" class="form-control-static" style="border-bottom:1px dotted #eee"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-1 col-lg-offset-3 control-label">生日：</label>
                                    <div class="col-lg-5">
                                        <p id="showBirthday" class="form-control-static" style="border-bottom:1px dotted #eee"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-1 col-lg-offset-3 control-label">签名：</label>
                                    <div class="col-lg-5">
                                        <p id="showSignature" class="form-control-static" style="border-bottom:1px dotted #eee"></p>
                                    </div>
                                </div>
                            </fieldset>
                            <input type="submit" class="finish btn btn-danger" value="完成注册" />
                        </form>
                    </div>
                </section>
            </div>
        </div>
        <!-- page end -->
    </section>
    <script type="text/javascript">
        var stepStatus; //步骤状态
        $(function() {
            $('#default').stepy({
                backLabel: '上一步',
                block: true,
                nextLabel: '下一步',
                titleClick: true,
                titleTarget: '.stepy-tab'
            });
            //禁用提交按钮
            // $('.finish').addClass('disabled');

            $('form').submit(function() {
                stepStatus = true;
                $('input').trigger('blur');
                if(!stepStatus){
                    alert('请完善您的表单信息！');
                }
                return stepStatus;
            });

            //步骤1
            $('input[name=username]').blur(function() {
                var username = $(this).val();
                regex = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
                if (regex.test(username)) {
                    $.get("{:U('Home/Api/checkemail')}", {
                        email: username
                    }, function(data) {
                        if (data.status == 0) {
                            $('#showUsername').html(username);
                            $('input[name=username]').parents('.form-group').find('.status-error').hide();
                            $('input[name=username]').parents('.form-group').find('.status-ok').show();
                        } else {
                            stepStatus = false;
                            $('input[name=username]').parents('.form-group').find('.status-error').show();
                            $('input[name=username]').parents('.form-group').find('.status-ok').hide();
                            alert('此邮箱已存在!');
                        }
                    }, 'JSON');
                } else {
                    stepStatus = false;
                }
            })
            $('input[name=password]').keyup(function() {
                    var password = $(this).val();
                    if (password.length >= 6 && password.length <= 18) {
                        $(this).parents('.form-group').find('.status-error').hide();
                        $(this).parents('.form-group').find('.status-ok').show();
                    } else {
                        stepStatus = false;
                        $(this).parents('.form-group').find('.status-error').show();
                        $(this).parents('.form-group').find('.status-ok').hide();
                    }
                })
            //步骤2
            $('input[name=nickname]').keyup(function() {
                var nickname = $(this).val();
                if (nickname.length > 0 && nickname.length <= 10) {
                    $('#showNickname').html(nickname);
                    $(this).parents('.form-group').find('.status-error').hide();
                    $(this).parents('.form-group').find('.status-ok').show();
                } else {
                    stepStatus = false;
                    $(this).parents('.form-group').find('.status-error').show();
                    $(this).parents('.form-group').find('.status-ok').hide();
                }
            })
            $('input[name=birthday]').blur(function() {
                var birthday = $(this).val();
                // console.log(birthday);
                if (birthday.length > 0) {
                    var birthdayS = Date.parse(new Date(birthday)) / 1000;
                    $('#showBirthday').html(birthday);
                    $(this).parents('.form-group').find('.status-error').hide();
                    $(this).parents('.form-group').find('.status-ok').show();
                } else {
                    stepStatus = false;
                    $(this).parents('.form-group').find('.status-error').show();
                    $(this).parents('.form-group').find('.status-ok').hide();
                }
            })
            $('textarea[name=signature]').blur(function() {
                var signature = $(this).val();
                $('#showSignature').html(signature);
            })
        });
    </script>
</block>
